<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import {UserRegister} from "@/utils/api/common.js";
import {ElMessage, ElNotification} from "element-plus";
import {dept, major} from "@/utils/model/graduate.js";

const router = useRouter();
const data = ref({
  sno: '',
  name: '',
  gender: '',
  major: '',
  dept: '',
  grade: '',
  phone: '',
  graduateDate: '',
  password: '',
});

const surePassword = ref("");

const register = (data) => {
  if (data.sno === '' || data.name === '' || data.gender === '' || data.major === ''
      || data.grade === '' || data.phone === '' || data.graduateDate === ''
      || data.password === '' || data.password === '' || surePassword.value === '') {
    ElMessage({
      message: '输入不能为空',
      type: 'error'
    });
    return;
  }

  if(!(/^1[3-9]\d{9}$/.test(data.phone))) {
    ElMessage({
      message: '联系方式错误',
      type: 'error'
    });
    return;
  }

  if (data.password !== surePassword.value) {
    ElMessage({
      message: '密码不一致',
      type: 'error'
    });
    return;
  }
  UserRegister(data)
      .then(result => {
        if (result.code === 1) {
          ElNotification({
            message: '注册成功',
            type: 'success',
            duration: 2000,
          });
          router.push({name: 'home'});
        } else {
          ElMessage({
            message: "注册失败",
            type: 'error'
          })
        }
      }).catch(error => console.error(error.toString()))
}
</script>

<template>
  <div class="main">
    <h2> 毕 业 生 注 册 </h2>
    <el-form label-width="80px">
      <el-form-item label="学 号">
        <el-input type="text" v-model="data.sno" placeholder="学 号" require/>
      </el-form-item>
      <el-form-item label="姓 名">
        <el-input type="text" v-model="data.name" placeholder="姓 名" require/>
      </el-form-item>
      <el-form-item label="性 别">
        <el-select v-model="data.gender" placeholder="性 别">
          <el-option label="男" value="1"/>
          <el-option label="女" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="学 院">
        <el-select v-model="data.dept" placeholder="学 院" @change="data.major = ''">
          <el-option v-for="(item, index) in dept" :key="index" :value="item" :label="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="专 业">
        <el-select v-model="data.major" placeholder="专 业">
          <el-option v-for="(item, index) in major[data.dept]" :key="index" :value="item" :label="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="班 级">
        <el-input type="text" v-model="data.grade" placeholder="班 级 例：20221507"/>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input type="text" v-model="data.phone" placeholder="联系方式"/>
      </el-form-item>
      <el-form-item label="毕业日期">
        <!--        <el-input type="text" v-model="data.graduateDate" placeholder="毕业日期"/>-->
        <el-date-picker type="date" v-model="data.graduateDate" placeholder="毕业日期"/>
      </el-form-item>
      <el-form-item label="设置密码">
        <el-input type="password" v-model="data.password" placeholder="设置密码"/>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input type="password" v-model="surePassword" placeholder="确认密码"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="register(data)">注 册</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="router.replace({name:'home'})">返 回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.main {
  margin: 50px 10px 10px 100px;
}

h2 {
  padding-left: 40px;
}

.el-form {
  margin-top: 20px;
  min-width: 500px;
  width: 500px;
}

.el-form-item {
  width: 90%;
}

.el-button {
  width: 100%;
}

</style>